<template>
	<view class="user-history">
		<!-- style="width: 320rpx; height: 320rpx;" -->
		<view class="history-icon-container">
			<image class="history-icon" src="/static/images/history.png" mode="aspectFill"></image>
		</view>

		<view class="news-list">
			<view class="news-item" v-for="item in newsList" :key="item.id">
				<news-item :newsItem="item" @click.native="goToDetail(item)"></news-item>
			</view>
		</view>

		<view v-if="newsList.length == 0" class="no-data">
			<image src="/static/images/nohis.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
			}
		},
		methods: {
			/**
			 * 跳转到详情
			 */
			goToDetail(item) {
				console.log('goToDetail:', item)
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?cid=${item.classid}&id=${item.id}`,
				})
			},
		},
		onLoad() {
			// 为什么不在这里写？
			// let history = uni.getStorageSync('userHistory')
			// console.log('记录中的history：',history)
			// this.newsList = history
		},
		onShow() {
			console.log('userHistoyr onShow')
			let history = uni.getStorageSync('userHistory')
			console.log('记录中的history：', history)
			this.newsList = history
		}
	}
</script>

<style lang="scss">
	.user-history {

		.history-icon-container {
			display: flex;
			justify-content: center;
			padding: 24rpx;
			background: #f8f8fe;

			.history-icon {
				width: 220rpx;
				height: 220rpx;
				margin: 0 auto;

			}
		}

		.news-list {
			padding: 24rpx;
		}
		
		.no-data{
			image{
				width: 100%;
			}
			
		}
	}
</style>